<template>
    <div>
        <div class="content">
            <web :src="getSrc()" class="article-content"></web>
            <AppHeader :title="headerTitle" :showBack=true :showPhoto=false ></AppHeader>

            <div class="footer-nav">

                <text class="input"  @click="commenting()" >我也来说两句</text>
                <div class="right" @click="toComment()">
                    <image style="width: 32px;height: 28px;margin-left: 16px;margin-right: 10px" src="" alt=""></image>
                    <text class="blue">128</text>
                    <image  style="width: 32px;height: 28px;margin-left: 10px;" src="" alt=""></image>
                </div>
            </div>

            <div class="text-nav" v-if="isCommenting">
                <textarea class="textarea" v-model="commentText" placeholder="请输入评论内容"></textarea>
                <div style="flex-direction: row;justify-content: flex-end;">
                    <text class="btn-cancel" @click="cancel()">取消</text>
                    <text class="btn" @click="comment()">发表</text>
                </div>
            </div>

        </div>

    </div>
</template>

<script>
    import AppHeader from '../../components/AppHeader.vue'
    const webview = weex.requireModule('webview')
    import mixins from '../../mixins'
    const navigator = weex.requireModule('navigator')


    module.exports = {
        mixins:[mixins],
        components: { AppHeader },
        data() {
            return {
                commentText:"",
                isCommenting:false,
                headerTitle:"资讯详情"
            }
        },
        methods: {
            commenting:function(){
                this.isCommenting = true;
            },
            comment:function(){
                this.isCommenting = false;
            },
            getSrc:function(){
                var articleId = this.$route.params["id"];
                console.log("articleId:"+articleId);
                return this.apiDomain+"/info/detail/"+articleId;
            },
            toComment:function(){
                var self = this;
                self.jump("/comments");
            }
        }
    }
</script>

<style scoped>
    .content{
    }
    .article-content{
        width:750px;
        height: 1200px;
    }

    .text-nav{
        background-color: rgba(243,239,236,.95);
        border-top-width:1px;
        border-top-style:solid;
        border-top-color: #f0f0f0;
        position: fixed;
        height: 914px;
        top:300px;
        left:0;
        right:0;
        width: 750px;
        flex-direction: column;
    }
    .textarea{
        background-color: #fff;
        width: 710px;
        border-radius: 5px;
        height: 204px;
        padding-left: 16px;
        padding-top:16px;
        font-size: 28px;
        margin-right: 20px;
        margin-left:20px;
        margin-top: 20px;
        border-color:#f0f0f0 ;
    }
    .btn{
        background-color: #42b7ff;
        width: 130px;
        border-radius: 6px;
        height: 80px;
        margin-top: 20px;
        padding-top: 20px;
        color: #ffffff;
        text-align: center;
        margin-right: 20px;

    }
    .btn-cancel{
        background-color: #ddd;
        width: 130px;
        border-radius: 6px;
        height: 80px;
        margin-top: 20px;
        padding-top: 20px;
        color: #ffffff;
        text-align: center;
        margin-right: 20px;

    }
    .footer-nav{
        background-color: rgba(243,239,236,.95);
        height: 120px;
        position: fixed;
        bottom: 0;
        left:0;
        right:0;
        flex-direction: row;
        padding-top: 27px;
        padding-bottom: 27px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .input{
        background-color: #fff;
        width: 550px;
        border-radius: 5px;
        height: 67px;
        padding-left: 12px;
        font-size: 28px;
        margin-right: 8px;
        color: #999999;
        padding-top: 16px;
    }
    .blue{
        color: #42b7ff;
        font-size: 22px;
    }
    .right{
        width: 137px;
        flex-direction: row;
        margin-top: 18px;
    }

    .navTitle{
        text-align: center;
        font-size: 36px;
        color: #fff;
        padding-top:10px ;
    }



</style>